<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css"/>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="voyages.js"></script>
<script src="map_style.js"></script>

<script>
var COLORS = ["#f66", "#6f6", "#66f", "#ff6", "#6ff", "#f6f", "#f96", "#fff"];
var COUNTRIES = ["DE", "DK", "ES", "FR", "NL", "SE", "UK", "US"];

var map;
var lines = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true,
    styles: style
  });

  // Create an array of voyages as Polylines.
  for (var i = 0; i < data.length; i++) {
    var path = [];
    for (var j = 0; j < data[i].path.length; j++) {
      path.push(new google.maps.LatLng(data[i].path[j].lat, data[i].path[j].lng));
    }

    var line = createPolyline(path, data[i].country);
    line.index = i;
    lines.push(line);
  }

  // Add the map controls.
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('controls'));
  map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(document.getElementById('key'));

  // Create the voyage slider.
  var slider = document.getElementById('slider');
  slider.max = data.length - 1;
  slider.addEventListener('change', updateVoyages, false);

  // Create the country key.
  var key = document.getElementById('key');
  for (var i = 0; i < COUNTRIES.length; i++) {
    var div = document.createElement('div');
    div.setAttribute('class', 'country');
    div.style.backgroundColor = COLORS[i];
    div.textContent = COUNTRIES[i];
    key.appendChild(div);
  }

  updateVoyages();
}

function createPolyline(path, country) {
  var line = new google.maps.Polyline({
    path: path,
    strokeWeight: 1,
    strokeOpacity: .3,
    strokeColor: COLORS[country],
    zIndex: 1,
    visible: false,
    map: map
  });

  google.maps.event.addListener(line, 'click', function(event) {
    var voyage = data[line.index];
    window.alert(
      "index: " + line.index + "\n" +
      "id: " + voyage.id + "\n" +
      "country: " + COUNTRIES[voyage.country] + "\n" +
      "points: " + voyage.path.length + "\n" +
      "start: " + voyage.path[0].time + "\n" +
      "end: " + voyage.path[voyage.path.length - 1].time);
  });

  google.maps.event.addListener(line, 'mouseover', function() {
    line.setOptions({
      strokeWeight: 3,
      strokeOpacity: 1,
      zIndex: 999
    });
  });

  google.maps.event.addListener(line, 'mouseout', function() {
    line.setOptions({
      strokeWeight: 1,
      strokeOpacity: .3,
      zIndex: 1
    });
  });

  return line;
}

var oldVal = 0;

function updateVoyages() {
  var val = parseInt(document.getElementById('slider').value);

  if (val < oldVal) { // Slider moved left.
    for (var i = val + 1; i <= oldVal; i++) {
      lines[i].setVisible(false);
    }
  } else { // Slider moved right.
    for (var i = oldVal; i <= val; i++) {
      lines[i].setVisible(true);
    }
  }

  oldVal = val;
  document.getElementById('slider-label').textContent = data[val].path[0].time.substring(0, 4);
}
</script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
  <div id="controls" class="control">
    <label id="slider-label" class="slider-label" for="year-slider">1750</label>
    <span class="slider-wrap">
      <input type="range" id="slider" class="slider" min="0" max="0" value="0" />
    </span>
  </div>
  <div id="key" class="control"></div>
</body>
</html>
